<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import dayjs from 'dayjs'
import { getCheckVerifyCode, getSendVerifyCode } from '@/api/contract'
import { getInfoByIdCardApi, logoutAccountApi } from '@/api/logout-last/index'
import type { personInfoMsgDto } from '@/api/logout-last/type'

// const statusBarHeight = ref(0)
const current = ref(1)
const tabList = ref([1, 2, 3])
const code = ref('')
const phone = ref('')
const verifyCode = ref('')
const codes = ref([] as string[])
const countingDown = ref(false)
const countDownTimer = ref(0)
const countDownNum = ref(60)
const infoMsg = ref({} as personInfoMsgDto)
function onToIndex() {
    uni.reLaunch({
        url: '/pages/index/index',
    })
}
function onToOtherWay() {
    console.log('其他申诉方式')
    uni.navigateTo({
        url: `/pages/appeal/appeal?idCardNo=${infoMsg.value.idCardNo}`,
    })
}

function changeStep(step: number) {
    current.value = step
    if (step === 2)
        getSendVerifyCodefn()
}

async function logoutAccount() {
    await logoutAccountApi({ idCardNo: infoMsg.value.idCardNo })
    await changeStep(3)
}

// 验证码校验
async function getCheckVerifyCodefn() {
    const res: boolean = await getCheckVerifyCode({
        phone: Number(infoMsg.value.phone),
        verifyCode: verifyCode.value,
    })
    return res
}
async function onSureLogout() {
    const res = await getCheckVerifyCodefn()
    if (res)
        logoutAccount()
}
function inputNumber(event: Event) {
    // 将密码分为多个字符
    codes.value = (event.target as HTMLInputElement).value.split('')
    verifyCode.value = (event.target as HTMLInputElement).value.slice(0, 6)
}

function startCountDown() { // 开始倒计时
    if (countingDown.value)
        return // 如果正在倒计时，则直接返回
    countingDown.value = true
    // 设置正在倒计时的标志

    const timer = setInterval(() => { // 每秒钟更新倒计时
        const newCountDownNum = countDownNum.value - 1
        if (newCountDownNum >= 0) { // 如果还未到 0 秒，则更新倒计时
            countDownNum.value = newCountDownNum
        }
        else { // 如果已经到 0 秒，则取消定时器并重置倒计时
            clearInterval(countDownTimer.value)
            countDownNum.value = 60
            countingDown.value = false
        }
    }, 1000)
    countDownTimer.value = timer
}

// 获取验证码
async function getSendVerifyCodefn() {
    const nowYear = dayjs().format('YYYY')
    const nowMonth = dayjs().format('MM')

    await getSendVerifyCode({
        phone: Number(infoMsg.value.phone) + 1001010086 + ((Number(nowYear) + Number(nowMonth)) * 1000000),
    })
    await startCountDown()
}
// 验证码校验
async function getCheckVerifyCodeasync() {
    const res = await getCheckVerifyCode({
        phone: phone.value,
        verifyCode: verifyCode.value,
    })
    console.log(res, 'fsdhjgdfsjh')
}
async function getInfoByIdCard(idCardNo: string) {
    const res = await getInfoByIdCardApi({
        idCardNo,
    })
    console.log(res, 'fghjadsyhjfsdah')
    infoMsg.value = res
}
onLoad(async (options) => {
    // getInfoByIdCard(options.idCardNo)
    console.log('options', options)

    options?.idCardNo && await getInfoByIdCard(options.idCardNo)
    options?.step && (current.value = Number(options.step))
    // 申述失败页面跳转过来
    options?.originPhone && (infoMsg.value.phone = options.originPhone)

    current.value === 2 && getSendVerifyCodefn()
})
</script>

<template>
    <NavbarContainer title="账号注销">
        <view class="mycontainer">
            <view class="mytab">
                <view v-for="(item, index) in tabList" :key="index" class="tabitem"
                      :class="{ current: item === current }" />
            </view>
            <view class="content">
                <view v-if="current === 1">
                    <view class="mb-72rpx text-center text-40rpx text-#202536">已绑定账号：{{ `${infoMsg.phone.slice(0, 3)}****${infoMsg.phone.slice(-4)}` }}</view>
                    <view
                        class="bgCard mb-104rpx box-border min-h-220rpx w-full flex items-center gap-24rpx rounded-16rpx py-20rpx pl-16rpx pr-60rpx">
                        <image class="rounded-half h-68rpx w-68rpx"
                               src="https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager9ea79849-d8f4-4deb-ba3b-f33e132a353e.png"
                               mode="scaleToFill" />
                        <view class="flex flex-col gap-12rpx">
                            <view class="text-32rpx font-bold">账号注销风险</view>
                            <view class="text-28rpx">
                                账号注销后领薪记录与工作<text class="text-#ff7e68">记录不可恢复</text>
                            </view>
                            <view class="text-28rpx -mt-8rpx">
                                如果您使用相同的身份证号再次注册，可以查看该身份证号下的待领薪记录。确定注销账号吗？
                            </view>
                        </view>
                    </view>
                    <view class="box-border w-full px-40rpx">
                        <view
                            class="box-border h-88rpx flex items-center justify-center rounded-44rpx bg-primary text-32rpx text-#ffffff"
                            @click="changeStep(2)">
                            已清楚风险，继续注销
                        </view>
                    </view>
                </view>
                <view v-if="current === 2">
                    <view class="mb-32rpx text-center text-44rpx font-bold">为了账号安全 请验证身份</view>
                    <view class="text-center text-28rpx text-#61677D">当前验证码已发放至手机号码</view>
                    <view class="mb-32rpx text-center text-28rpx text-#61677D">（+86）{{ `${infoMsg.phone.slice(0, 3)}****${infoMsg.phone.slice(-4)}` }}</view>
                    <view class="code">
                        <input v-model="code" type="number" :adjust-position="false" class="input" maxlength="6"
                               :focus="true" @input="inputNumber">
                        <view class="num" :class="{ codeActive: codes.length === 0 }">{{ codes[0] }}</view>
                        <view class="num" :class="{ codeActive: codes.length === 1 }">{{ codes[1] }}</view>
                        <view class="num" :class="{ codeActive: codes.length === 2 }">{{ codes[2] }}</view>
                        <view class="num" :class="{ codeActive: codes.length === 3 }">{{ codes[3] }}</view>
                        <view class="num" :class="{ codeActive: codes.length === 4 }">{{ codes[4] }}</view>
                        <view class="num" :class="{ codeActive: codes.length === 5 }">{{ codes[5] }}</view>
                    </view>
                    <view v-if="!countingDown" class="mb-56rpx text-center text-24rpx" @click="getSendVerifyCodefn">重新发送验证码</view>
                    <view v-if="countingDown" class="mb-56rpx text-center text-24rpx text-#61677D">
                        {{ countDownNum }}s
                        后可重新发送验证码
                    </view>
                    <view class="box-border w-full px-40rpx">
                        <view
                            class="box-border h-88rpx flex items-center justify-center rounded-44rpx bg-primary text-32rpx text-#ffffff"
                            @click="onSureLogout">
                            确定注销
                        </view>
                    </view>
                </view>
                <view v-if="current === 3">
                    <view class="mb-24rpx flex items-center justify-center">
                        <image class="rounded-half h-320rpx w-320rpx"
                               src="https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManagerf4893f6a-9e01-4c99-909e-1495df60c436.png"
                               mode="scaleToFill" />
                    </view>
                    <view class="mb-88rpx text-center text-44rpx font-bold">注销成功</view>
                    <view class="box-border w-full px-40rpx">
                        <view
                            class="box-border h-88rpx flex items-center justify-center rounded-44rpx bg-primary text-32rpx text-#ffffff"
                            @click="onToIndex">
                            返回首页
                        </view>
                    </view>
                </view>
            </view>
            <view v-if="current === 2" class="pos-fixed bottom-100rpx left-0 w-full text-center text-28rpx text-#1989FA"
                  @click="onToOtherWay">
                收不到验证码使用其他申诉方式
            </view>
        </view>
    </NavbarContainer>
</template>

<style scoped>
.mycontainer {
    width: 100%;
    box-sizing: border-box;
    min-height: 100vh;
    background-color: #ffffff;
    padding: 0 32rpx;
}

.mytab {
    padding-top: 72rpx;
    margin-bottom: 200rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12rpx;
}

.tabitem {
    width: 30rpx;
    height: 4rpx;
    background-color: rgba(62, 95, 245, 0.2);
}

.current {
    background-color: #3E5FF5 !important;
}

.content {
    width: 100%;
    box-sizing: border-box;
}

.bgCard {
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0),
            rgb(255, 255, 255) 125.557%),
        linear-gradient(90deg, rgb(255, 238, 243), rgb(254, 237, 229) 100%);
}

.rounded-half {
    flex-shrink: 0;
    border-radius: 50%;
}

.code {
    display: flex;
    justify-content: center;
    height: 100rpx;
    margin-top: 100rpx;
    align-items: center;
    margin-bottom: 136rpx;
}

.code .num {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #00d679;
    box-sizing: border-box;
    font-size: 65rpx;
    font-weight: bold;
    width: 90rpx;
    height: 90rpx;
    margin: 0 10rpx;
    position: relative;
    background-color: #f5f9fe;
    border-radius: 7rpx;
}

.input {
    position: absolute;
    width: 200%;
    /* height: 400%; */
    opacity: 0;
    left: -100%;
    z-index: 999;
}

.codeActive {
    border: 2rpx solid #3E5FF5;
}
</style>

<route lang="json">
{
    "style": {
        "navigationBarTitleText": "账号注销"
    }
}
</route>
